<template>
  <div class="main">
    <Top name1='权限管理' name2="权限列表"></Top>
    <table>
      <tr>
        <th></th>
        <th>名字</th>
        <th>路径</th>
        <th>等级</th>
      </tr>
      <tr  v-for="(ele,ind) in list" :key="ele.id">
        <td>
          {{ ++ind }}
        </td>
        <td>
          {{ ele.authName }}
        </td>
        <td>
          {{ ele.path }}
        </td>
        <td>
          <el-tag v-if="ele.level==0" type="success" effect="dark"> {{ ele.level }}</el-tag>
          <el-tag v-else-if="ele.level==1" effect="dark"> {{ ele.level }}</el-tag>
          <el-tag v-else-if="ele.level==2" type="danger" effect="dark"> {{ ele.level }}</el-tag>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import { rightsAjax } from '../../api/right';
import Top from '../../components/top.vue'
  export default {
    components:{
      Top
    },
    data () {
      return {
        list:[]
      };
    },

    async created() {
      let res =  await rightsAjax({
        type:'list'
      })
      console.log(res);
      if(res.data.meta.status!=200){
        this.$message({
          type:'error',
          message:"获取权限列表失败"
        })
      }
      this.list = res.data.data;
    },
    mounted() {},

  }
</script>
<style lang='scss' scoped>
.main{
  padding:30px 0 0 10%;
  table{
  text-align: center;
  tr,th,td{
    border: 1px solid #ece6e6;
    height: 50px;
  }
  tr:nth-of-type(even){
    background-color: #f9fafb;
  }
  width: 600px;
  border: 1px solid #ece6e6;
  border-collapse: collapse;
}
}
</style>